<template>
  <div class="home">
      <!-- <router-link to="/about" tag="p">首页</router-link> -->
      <header class="header">
        <router-link to="/" tag="p">
          <img class="titbg" src="~/assets/icon/hometop.png"/>
          <h2>应急指挥平台3D可视化系统</h2>
          <span class="hspan">3D visualization system management system</span>
        </router-link>

        <div class="tit1">
          <p class="fl tl">2D/3D</p>
          <p class="fl tl">鹰眼</p>
          <p class="fr tr" @click="devflag=!devflag">设备分类</p>
          <p class="fr tr">热力图</p>
        </div>

        <div class="tit2">
            <router-link to="/home/child1" tag="p" class="fl">
            <img class="mr5" src="~/assets/icon/top1.png">
            <span>设备</span>
            </router-link>
            <router-link to="/home/child2" tag="p" class="fl">
            <img class="mr5" src="~/assets/icon/top2.png">
            <span>告警</span>
            </router-link>
            <router-link to="/home/child4" tag="p" class="fr">
            <img class="mr5" src="~/assets/icon/top3.png">
            <span>商铺</span>
            </router-link>
            <router-link to="/home/child3" tag="p" class="fr">
            <img class="mr5" src="~/assets/icon/top4.png">
            <span>运营分析</span>
            </router-link>
        </div>
      </header>

      <!-- 公用设备分类组件 -->
        <DeviceClassify v-show="devflag"></DeviceClassify>
        <FacilityClassify v-show="gomodel"></FacilityClassify>


<router-view></router-view>
  </div>
</template>

<script>
  //引入请求
  // import {GetHellowUrl,getGroupDeviceList} from '../network/home.js';
  //设备分类组件
  import DeviceClassify from '@/components/content/DeviceClassify';
  //设施分类
  import FacilityClassify from '@/components/content/FacilityClassify';
  import {mapState} from "vuex";

  export default{
    name: 'home',
    data() {
      return {
        //设备分类模块
        devflag:false,
        gomodel:false
      }
    },
    created() {
      // this.GetHellowUrl();
      // this.getGroupDeviceList();
    },
    mounted() {

    },
    components:{
      DeviceClassify,
      FacilityClassify
    },
    methods: {
     //  //不传参请求
     // GetHellowUrl(){
     //   GetHellowUrl().then(res=>{
     //     console.log(res);
     //   })
     // },
     // //传参请求
     // getGroupDeviceList(){
     //   getGroupDeviceList('1038604707083456512').then(res=>{
     //     console.log(res);
     // })
     // }
    },
    computed: {
      ...mapState({
        modelChange: e => e.modelClick
      })
    },
    watch: {
      modelChange(val) {
        console.log(val+`模型点击了`);
        this.gomodel=true;
      },
    }
  }
</script>

<style lang="less" scoped>
  .header{
    width: 100%;
    position: absolute;
    z-index: 9;
    pointer-events: none;
    p{
      cursor: pointer;
      font-weight: bold;
      .titbg{
        width: 100%;
        height: 72px;
      }
    }
    h2{
      position: absolute;
      top: 11px;
      left: 50%;
      transform: translateX(-50%);
      color: @fcolor;
      font-size: 23px;
      font-weight: bold;
      pointer-events: auto;
    }
    .hspan{
      position: absolute;
      top: 41px;
      left: 50%;
      transform: translateX(-50%);
      color: @fcolor;
      font-size: 12px;
      pointer-events: auto;
    }
    div{
      min-width: 600px;
      width: 100%;
      display: inline-block;
      p{
        cursor: pointer;
        margin: 0px 8px;
        // border: 1px solid skyblue;
        pointer-events: auto;
        color: @fcolor;
      }
    }
    .tit1{
          position: absolute;
          top: 25px;
      p{
         padding: 5px 35px;
      }
      .tl{
        background: url(../assets/icon/topl.png) no-repeat;
        background-size: 100% 100%;
        &:hover{
           background: url(../assets/icon/toplh.png) no-repeat;
           background-size: 100% 100%;
        }
      }
      .tr{
        background: url(../assets/icon/topr.png) no-repeat;
        background-size: 100% 100%;
        &:hover{
          background: url(../assets/icon/toprh.png) no-repeat;
          background-size: 100% 100%;
        }
      }
      p{
        line-height: 15px;
      }
    }
    .tit2{
      position: absolute;
      top: 60px;
      p{
        background: url(../assets/icon/topradius.png) no-repeat;
        background-size: 100% 100%;
        padding: 8px 80px 8px 20px;
        &:hover{
          background: url(../assets/icon/topradiush.png) no-repeat;
          background-size: 100% 100%;
          color: #16D5F1;
        }
      }
      img{
        width: 18px;
        height: 18px;
        vertical-align: middle;
      }
    }
  }
</style>
